import QtQuick

BorderImage {
    id: root
    width: 600
    height: 300
    source: "qrc:/images/frame2.png"
    
    // 定义9宫格保留区域（单位：像素）
    border {
        left: 20    // 左侧保留区域（不拉伸）
        right: 20   // 右侧保留区域
        top: 20     // 顶部保留区域
        bottom: 20  // 底部保留区域
    }
    
    // 拉伸模式配置
    horizontalTileMode: BorderImage.Stretch  // 水平方向拉伸中间区域
    verticalTileMode: BorderImage.Stretch    // 垂直方向拉伸中间区域
    
    // 按钮交互状态
    states: State {
        name: "pressed"
        when: mouseArea.pressed
        PropertyChanges {
            target: root
            opacity: 0.8
            scale: 0.98
        }
    }
    
    // 鼠标交互区域
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
    }
    
    // 状态切换动画
    Behavior on opacity { NumberAnimation { duration: 100 } }
    Behavior on scale { NumberAnimation { duration: 100 } }
}
